import { useEffect, useRef, useState } from "react";
import {Link, useParams} from "react-router-dom"

import Putouts from "../../components/common/Putouts";
import ProfileHeaderSkeleton from "../../components/skeletons/ProfileHeaderSkeleton";
import EditProfileModal from "./EditProfileModal";

import { PUTOUT_USECASES } from "../../utils/db/dummy";

import {FaArrowLeft} from "react-icons/fa6"
import {IoCalendarOutline} from "react-icons/io5"
import {FaLink} from "react-icons/fa"
import {MdEdit} from "react-icons/md"
import {useQuery} from "@tanstack/react-query"
import { formatMemberSinceData } from "../../utils/date";

import useFollow from "../../hooks/useFollow";
import useUpdateUserProfile from "../../hooks/useUpdateUserProfile";

const ProfilePage = () => {
    const [coverImg, setCoverImg] = useState(null)
    const [profileImg, setProfileImg] = useState(null)
    const [feedType, setFeedType] = useState("putouts")

    const coverImgRef = useRef(null)
    const profileImgRef = useRef(null)

    const {username} = useParams()

    const {follow, isPending} = useFollow()

    const {data: authUser} = useQuery({
        queryKey: ["authUser"]
    })

    const {
        data: user,
        isLoading,
        refetch,
        isRefetching,
    } = useQuery({
        queryKey: ["userProfile"],
        queryFn: async () => {
            try {
                const res = await fetch(`/api/users/profile/${username}`)
                const data = res.json()
                if (!res.ok) {
                    throw new Error(data.error || "Something went wrong")
                }

                return data
            }catch(error) {
                throw new Error(`Error in ${__filename}: ` + error)
            }
        }
    })

    const {isUpdatingProfile, updateProfile} = useUpdateUserProfile()

    const isMyProfile = authUser._id === user?._id
    const memberSinceDate = formatMemberSinceData(user?.createdAt)
    const amIFollowing = authUser?.following.include(user?._id)

    const handleImgChange = (e, state) => {
        const file = e.target.files[0]
        if (file) {
            const reader = new FileReader()
            reader.onload = () => {
                state === "coverImg" && setCoverImg(reader.result)
                state === "profileImg" && setProfileImg(reader.result)
            }

            reader.readAsDataURL(file)
        }
    }

    useEffect(() => {
        refetch()
    }, [username, refetch])

    // TODO: fix this comp
    return (
        <>
        
        </>
    )
}

export default ProfilePage